<template>
    <div class="app-container">
        <div class="searchAll" slot="search">
            <el-form :model="queryParams" ref="queryForm" label-position="right" v-show="showSearch" label-width="68px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item :label="$t('deptManage.deptName')" prop="deptName">
                            <el-input v-model="queryParams.deptName" :placeholder="$t('public.placeholder',{placeholder:$t('deptManage.deptName')})" clearable size="small" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('public.status')" prop="status">
                            <el-select v-model="queryParams.status" :placeholder="$t('public.select_holder',{select_holder: $t('deptManage.deptStatus')})" clearable size="small" style="width:100%">
                                <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <div class="searchAres searchAresHeng">
                            <el-button type="primary" icon="el-icon-search" size="mini" class="searchBtn" @click="handleQuery">{{ $t("public.query") }}</el-button>
                            <el-button class="resectBtn" icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("public.reset") }}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="tableList">
            <div class="insTitle">
                <span>{{ $t("systemTitle.divisionalManagement") }}</span>
            </div>
            <div class="btnGroup">
                <el-button v-hasPermi="['tenant:dept:add']" type="primary" icon="el-icon-plus" size="mini" class="additemBtn" @click="handleAdd">{{ $t("public.add") }}</el-button>
                <el-button icon="el-icon-sort" size="mini" class="resectBtnsort" @click="toggleExpandAll">{{$t('deptManage.openOrClosed')}}</el-button>

            </div>
            <el-table max-height="350" border v-if="refreshTable" v-loading="loading" :data="deptList" stripe row-key="deptId" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="deptName" :label="$t('deptManage.deptName')"></el-table-column>

                <el-table-column prop="orderNum" :label="$t('deptManage.sort')" align="center"></el-table-column>
                <el-table-column prop="status" :label="$t('public.status')" align="center">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column :label="$t('public.createTime')" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('public.opera')" fixed="right" align="center">
                    <template slot-scope="scope">
                        <div class="action-wrap">
                            <table-body-btn type="add" :name="$t('public.add')" @click.native="handleAdd(scope.row)" v-hasPermi="['tenant:dept:add']" />
                            <table-body-btn type="gwedit" :name="$t('public.edit')" @click.native="handleUpdate(scope.row)" v-hasPermi="['tenant:dept:edit']" />
                            <table-body-btn type="gwdelete" :name="$t('public.delete')" @click.native="handleDelete(scope.row)" v-hasPermi="['tenant:role:remove']" />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 添加或修改部门对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :fullscreen="fullscreen">
            <DialogTit slot="title" :title="title" :fullscreen.sync="fullscreen"></DialogTit>
            <el-form ref="form" :model="form" :rules="rules" label-width="160px">
                <el-row>
                    <el-col :span="24" v-if="form.parentId !== 0">
                        <el-form-item :label="$t('deptManage.superiorDept')" prop="parentId" size="small">
                            <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" :placeholder="$t('public.select_holder',{select_holder: $t('deptManage.superiorDept')})" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('deptManage.deptName')" prop="deptName" size="small">
                            <el-input v-model="form.deptName" :placeholder="$t('public.placeholder',{placeholder:$t('deptManage.deptName')})" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('deptManage.showSort')" prop="orderNum" size="small">
                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" step-strictly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('deptManage.chargePerson')" prop="leader" size="small">
                            <el-input v-model="form.leader" :placeholder="$t('public.placeholder',{placeholder:$t('deptManage.chargePerson')})" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('public.contactPhone')" prop="phone" size="small">
                            <el-input v-model="form.phone" :placeholder="$t('public.placeholder',{placeholder:$t('public.contactPhone')})" maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('public.email')" prop="email" size="small">
                            <el-input v-model="form.email" :placeholder="$t('public.placeholder',{placeholder:$t('public.email')})" maxlength="50" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('deptManage.deptStatus')" size="small">
                            <el-radio-group v-model="form.status">
                                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small" icon="el-icon-close">{{$t('public.cancel')}}</el-button>
                <el-button type="primary" @click="submitForm" size="small" icon="el-icon-check">{{$t('public.define')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listDept,
    getDept,
    delDept,
    addDept,
    updateDept,
    listDeptExcludeChild,
} from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name: 'Dept',
    dicts: ['sys_normal_disable'],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 显示搜索条件
            showSearch: true,
            // 表格树数据
            deptList: [],
            // 部门树选项
            deptOptions: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                deptName: undefined,
                status: undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                parentId: [
                    {
                        required: true,
                        message: '上级部门不能为空',
                        trigger: 'blur',
                    },
                ],
                deptName: [
                    {
                        required: true,
                        message: '部门名称不能为空',
                        trigger: 'blur',
                    },
                ],
                orderNum: [
                    {
                        required: true,
                        message: '显示排序不能为空',
                        trigger: 'blur',
                    },
                ],
                email: [
                    {
                        type: 'email',
                        message: "'请输入正确的邮箱地址",
                        trigger: ['blur', 'change'],
                    },
                ],
                phone: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur',
                    },
                ],
            },
            fullscreen: false,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询部门列表 */
        getList() {
            this.loading = true
            listDept(this.queryParams).then((response) => {
                this.deptList = this.handleTree(response.data, 'deptId')
                this.loading = false
            })
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children,
            }
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                deptId: undefined,
                parentId: undefined,
                deptName: undefined,
                orderNum: undefined,
                leader: undefined,
                phone: undefined,
                email: undefined,
                status: '0',
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset()
            if (row != undefined) {
                this.form.parentId = row.deptId
            }
            this.open = true
            this.title = this.$t('deptManage.addDept')
            listDept().then((response) => {
                this.deptOptions = this.handleTree(response.data, 'deptId')
            })
        },
        /** 展开/折叠操作 */
        toggleExpandAll() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            this.$nextTick(() => {
                this.refreshTable = true
            })
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            getDept(row.deptId).then((response) => {
                this.form = response.data
                this.open = true
                this.title = this.$t('deptManage.modDept')
            })
            listDeptExcludeChild(row.deptId).then((response) => {
                this.deptOptions = this.handleTree(response.data, 'deptId')
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.deptId != undefined) {
                        updateDept(this.form).then((response) => {
                            this.$modal.msgSuccess(this.$t('formValidation.successfullyModified'))
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addDept(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal
                .confirm(
                    this.$t('public.preConfirm', {
                        key: this.$t('public.name'),
                        value: row.deptName,
                    })
                )
                .then(function () {
                    return delDept(row.deptId)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess(this.$t('deptManage.delSuc'))
                })
                .catch(() => {})
        },
    },
}
</script>
<style scoped>
.resectBtnsort {
    background: #f7f8fa;
}
.resectBtnsort ::v-deep i {
    color: #20b09f;
}
/* 20B09F */
</style>
